<template>
  <div>
    <el-table :data="evaluationForm"
              style="width: 100%"
              :row-style="{height: '80px'}">
      <el-table-column prop="evaluateId"
                       label="评价id"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateMessage"
                       label="评价内容"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateLevelId"
                       label="评价等级ID"
                       width="180">
      </el-table-column>
      <el-table-column prop="finalOrderId"
                       label="最终订单id"
                       width="180">
      </el-table-column>
      <el-table-column prop="finalOrderNo"
                       label="最终订单编号"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateImage1"
                       label="客户返图1"
                       width="180">
        <template slot-scope="scope">
          <el-link @click="downLoad(scope.row.evaluateImage1)"
                   target="_blank">
            <img :src="scope.row.evaluateImage1"
                 style="width: 60px; height: 60px"
                 class="picture" />
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="evaluateImage2"
                       label="客户返图2"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateImage3"
                       label="客户返图3"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateImage4"
                       label="客户返图4"
                       width="180">
      </el-table-column>
      <el-table-column prop="evaluateDesc"
                       label="评价备注"
                       width="180">
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      evaluationForm: []
    };
  },
  methods: {
    loadevaluation () {
      this.$axios.get("evaluation/" + this.userId).then((resp) => {
        this.evaluationForm = resp.data.data.evaluationForm;

      });
    },
    // 下载文件
    downLoad (picture) {
      let pic = picture.substr(picture.lastIndexOf("/") + 1);
      this.$axios
        .get("/downLoadFile", {
          params: { filename: pic },
          responseType: "blob",
        })
        .then((res) => {
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", pic); //指定下载后的文件名，防跳转
          document.body.appendChild(link);
          link.click();
          // 释放内存
          window.URL.revokeObjectURL(link.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  created () {
    this.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.loadevaluation();
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-input {
  width: 170px;
}
.el-select {
  width: 170px;
}
.frame {
  width: 470px;
}
</style>